<template>
  <div class="description"
       :style="{
         'background-color':backgroundColor,
         'font-color':fontColor,
         'font-size':fontSize,
         'text-align':textAlign,
         'text-decoration':decoration,
         'font-weight':isBold?'bold':'normal',
         'font-style':isOblique?'oblique':'normal'}">
    <div v-html="content"></div>
  </div>
</template>

<script>
import PropTypes from '@zh/common-utils/prop-types'
const cloneDeep = require('clone')

export default {
  name: 'Description',
  extends: null,
  mixins: [],
  components: {},
  props: {
    // 文本
    value: PropTypes.string.def(''),
    // 背景颜色
    backgroundColor: PropTypes.string.def(''),
    // 字体颜色
    fontColor: PropTypes.string.def(''),
    // 字体大小
    fontSize: PropTypes.string.def(''),
    // 对齐方式
    textAlign: PropTypes.string.def(''),
    // 下划线
    decoration: PropTypes.string.def(''),
    // 文字是否加粗
    isBold: PropTypes.bool.def(false),
    // 是否斜体
    isOblique: PropTypes.bool.def(false)
  },
  data () {
    return {
      content: ''
    }
  },
  computed: {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (value) {
        this.content = cloneDeep(value)
        this.content = this.showContent(this.content)
      }
    }
  },
  created () { },
  mounted () { },
  methods: {
    // 富文本处理
    showContent (str) {
      return str
        .replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "\'")
        .replace(/&amp;nbsp;/g, '\u3000')
    }

  }
}
</script>

<style lang="less" scoped>
::v-deep .description img {
  max-width: 100%;
}
</style>